<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>手机菜单管理</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../lib/layer/theme/default/layer.css">
    <link rel="stylesheet" href="../../static/css/skins.css">
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/layer/layer.min.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <script type="text/javascript" src="../../static/js/tool.js"></script>
    <script type="text/javascript" src="../../static/js/axios.min.js"></script>
    <style type="text/css">
        /*
        找到html标签、body标签，和挂载的标签
        都给他们统一设置样式
    */
        html,
        body,
        #app,
        .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }

        .el-main {
            padding: 4px;
        }

        .el-cascader-menu__wrap {
            min-height: 350px
        }
        .el-icon-search{
            color: #409EFF;
        }
        .el-icon-refresh-right{
            color: #409EFF;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body class="skin-blue skin-del">
<el-container id="app">
    <el-main>
        <el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
                 size="mini" style="height: 35px;" @submit.native.prevent>
            <el-form-item label="菜单名称">
                <el-input v-model="queryData.keyword" placeholder="请输入关键字"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" icon="el-icon-search" @click="searchEvent">查询</el-button>
                <el-button size="mini" icon="el-icon-refresh-right" @click="searchEventA">重置</el-button>
            </el-form-item>
        </el-form>
        <vxe-grid border ref="xTree" resizable show-overflow highlight-current-row="true" keep-source
                  @page-change="handlePageChange" :height="tableHeight" size="mini" row-id="menuCode"
                  :checkbox-config="tableRadio" :toolbar="tableToolbar" :pager-config="tablePage"
                  :loading="dataLoading" @cell-dblclick="cellDBLClickEvent"
                  :edit-config="{trigger:'click', mode:'row'}" :header-cell-style="{'text-align':'center'}"
                  @toolbar-button-click="toolbarButtonClickEvent" :data="tableData" :sort-config="{remot:true}"
                  @sort-change="tableSortChange">
            <vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
            <vxe-table-column field="menuId" title="菜单编码" width="100" align="right" sortable='custom'>
            </vxe-table-column>
            <vxe-table-column field="menuName" title="菜单名称" width="200" align="left">
            </vxe-table-column>
            <vxe-table-column field="parentMenuName" title="父级菜单" width="200" align="left">
            </vxe-table-column>
            <vxe-table-column field="iconPath" title="菜单图标" width="80" align="center" type="html"
                              :formatter="formatIcon"></vxe-table-column>
            <vxe-table-column field="menuPath" title="菜单地址" align="left">
            </vxe-table-column>
            <vxe-table-column field="menuLx" title="菜单类型" width="100" align="left">
                <template v-slot="{ row }">
                    {{formatterMenuType(row.menuLx)}}
                </template>
            </vxe-table-column>
            <vxe-table-column field="menuDsc" title="备注" width="140" align="left">
            </vxe-table-column>
            <vxe-table-column field="orderId" title="排序号" width="80" align="right">
            </vxe-table-column>
            <vxe-table-column field="createUser" title="创建人" width="130" align="left">
            </vxe-table-column>
            <vxe-table-column field="createTime" title="创建日期" width="150" align="right" :formatter="formatDate" sortable>
            </vxe-table-column>
            <vxe-table-column field="id" title="菜单ID" width="180" align="right" :visible="visible">
            </vxe-table-column>
        </vxe-grid>

        <vxe-modal ref="xModal" v-model="showEdit" :title="selectRow ? '编辑&保存' :'新增&保存'" width="800"
                   :loading="submitLoading" resize destroy-on-close>
            <el-form :model="formData" :rules="formRules" ref="formData" label-width="80px"
                     label-position="right" size="mini">
                <template v-if="visible===true">
                    <el-form-item label="菜单ID" prop="menuId">
                        <el-input v-model="formData.menuId"></el-input>
                    </el-form-item>
                </template>
                <el-row>
                    <el-col span="12">
                        <el-form-item label="菜单类型" prop="menuLx">
                            <el-select v-model="formData.menuLx" clearable placeholder="请选择菜单类型"
                                       style="width:100%">
                                <el-option v-for="item in menuTypeOptions" :key="item.value" :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col span="12">
                        <el-form-item label="排序号" prop="orderId">
                            <el-input-number v-model="formData.orderId" step="5" placeholder="请输入排序号"
                                             style="width:100%"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="12">
                        <el-form-item label="父级菜单" prop="parentMenuId">
                            <el-cascader v-model="formData.parentMenuId" :options="menuOptions"
                                         :props="{ expandTrigger: 'hover',checkStrictly:true,multiple:false,emitPath:false }"
                                         clearable filterable style="width:100%">
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="菜单名称" prop="menuName">
                    <el-input type="text" v-model="formData.menuName" placeholder="请输入菜单名称" maxlength="100"
                              show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" prop="iconPath">
                    <el-input type="text" v-model="formData.iconPath" placeholder="请选择菜单图标" maxlength="202">
                        <el-button slot="prepend" :icon="formData.iconPath"></el-button>
                        <el-button slot="append" icon="el-icon-search" @click="selectMenuIcon" v-cloak>选择
                        </el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="菜单地址" prop="menuPath">
                    <el-input type="text" v-model="formData.menuPath" placeholder="请输入菜单地址" maxlength="200"
                              show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="报表路径"
                              v-show="formData.menuLx=='3'||formData.menuLx=='4'||formData.menuLx=='树形报表'||formData.menuLx=='帆软报表'">
                    <el-input type="text" v-model="formData.reportPath" placeholder="请输入菜单名称" maxlength="1000"
                              show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="数据源"
                              v-show="formData.menuLx=='3'||formData.menuLx=='4'||formData.menuLx=='树形报表'||formData.menuLx=='帆软报表'">
                    <el-input type="text" v-model="formData.dataSource" placeholder="请输入菜单名称" maxlength="500"
                              show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="menuDsc">
                    <el-input type="textarea" v-model="formData.menuDsc" :autosize="{ minRows: 2, maxRows: 4}"
                              placeholder="请输入备注" maxlength="200" show-word-limit></el-input>
                </el-form-item>
                <el-form-item style="height:auto;padding:4px 20px;text-align: right;">
                    <el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')"
                               :disabled="disabled" v-cloak>保存</el-button>
                    <el-button type="warning" icon="el-icon-refresh" @click="resetEvent('formData')"
                               v-cloak>
                        重置
                    </el-button>
                    <el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')"
                               v-cloak>
                        退出
                    </el-button>
                </el-form-item>
            </el-form>
        </vxe-modal>
    </el-main>
</el-container>
</body>
<script type="text/javascript">
    var vue = null;
    window.onload = function() {
        var main = {
            data() {
                return {
                    selectRow: [],
                    isEdit: false,
                    tablePage: {
                        perfect: true,
                        total: 0,
                        currentPage: 1,
                        pageSize: 30,
                        align: 'left',
                        pageSizes: [30, 50, 100, 200],
                        layouts: [
                            'Sizes',
                            'PrevJump',
                            'PrevPage',
                            'Number',
                            'NextPage',
                            'NextJump',
                            'FullJump'
                        ]
                    },
                    dataLoading: false,
                    loading: false,
                    disabled: false,
                    visible: false,
                    tableHeight: '100%',
                    tableData: [],
                    menuTypeOptions: [{
                        value: 1,
                        label: '功能菜单'
                    }, {
                        value: 2,
                        label: '父级菜单'
                    }, {
                        value: 3,
                        label: '树形报表'
                    }, {
                        value: 4,
                        label: '帆软报表'
                    }],
                    menuOptions: [],
                    tableToolbar: {
                        id: 'toolbar',
                        size: 'mini',
                        perfect: true,
                        buttons: [],
                    },
                    tableExport: {
                        filename: 'export',
                        sheetName: 'Sheet1',
                        type: 'xlsx',
                        // 自定义类型
                        types: ['xlsx', 'csv', 'html', 'xml', 'txt']
                    },
                    tableRadio: {
                        trigger: 'row',
                        highlight: true
                    },
                    submitLoading: false,
                    selectRow: null,
                    showEdit: false,
                    queryData: {
                        keyword: ""
                    },
                    formData: {
                        menuId: "",
                        menuName: "",
                        parentMenuId: "",
                        iconPath: "",
                        menuPath: "",
                        menuLx: "",
                        menuDsc: "",
                        orderId: "",
                        reportPath: "",
                        dataSource: ""
                    },
                    formRules: {
                        menuName: [{
                            required: true,
                            message: '请输入菜单名称'
                        },
                            {
                                min: 1,
                                max: 200,
                                message: '长度在1到200个字符'
                            }
                        ],
                        menuLx: [{
                            required: true,
                            message: '请选择菜单类型'
                        }],
                        orderId: [{
                            required: true,
                            message: '请输入序号'
                        }],
                        parentMenuId: [{
                            required: true,
                            message: '请选择节点'
                        }]
                    },
                    //排序
                    prop: '',
                    order: ''
                }
            },
            created() {
                this.findList();
                this.getButton();
            },
            mounted() {
                this.tableHeight = window.innerHeight - this.$refs.xTree.$el.offsetTop - 5;
            },
            methods: {
                searchEvent() {
                    this.findList();
                },
                searchEventA() {
                    this.queryData.keyword = "";
                    this.findList();
                },
                //点击选中
                cellClickEvent({
                                   row,
                                   column,
                                   triggerRadio
                               }) {
                    console.log(row, column, triggerRadio)
                },
                getTreeData(data) {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].children.length < 1) {
                            // children若为空数组，则将children设为undefined
                            data[i].children = undefined;
                        } else {
                            // children若不为空数组，则继续 递归调用 本方法
                            this.getTreeData(data[i].children);
                        }
                    }
                    return data;
                },
                //分页
                handlePageChange({
                                     currentPage,
                                     pageSize
                                 }) {
                    this.tablePage.currentPage = currentPage
                    this.tablePage.pageSize = pageSize
                    this.findList()
                },
                findList() {
                    let queryParams = Object.assign({
                        page: this.tablePage.currentPage,
                        rows: this.tablePage.pageSize,
                        keyword: this.queryData.keyword,
                        //order为排序的方式，prop为排序的列
                        order:this.order,
                        prop:this.prop,
                    });
                    this.dataLoading = true;
                    var object = this;
                    webApi("/menuapp/getMenuTreeGrid", "post", queryParams, function(data) {
                        object.tableData = data.data.rows;
                        object.tablePage.total = data.data.total
                        object.dataLoading = false;
                        object.getMenuOptions();
                    }, function(data) {
                        object.tableData = [];
                        object.tablePage.total = 0
                        object.dataLoading = false;
                    });
                },
                getButton() {
                    this.tableToolbar.buttons = []
                    let bts = Tool.getButton()
                    let btns = []
                    this.tableToolbar.buttons = btns.concat(bts)
                },
                getMenuOptions() {
                    var signInputParms = {}
                    var object = this;
                    webApi("/menuapp/getMenuOptions", "post", signInputParms, function(data) {
                        object.menuOptions = object.getTreeData(data.data);
                    }, function(data) {});
                },
                searchEvent(formName, acType) {
                    this.tablePage.currentPage = 1
                    if (acType == 0) {
                        this.queryData = {
                            keyword: ""
                        }
                    }
                    this.findList();
                },
                formatDate({
                               cellValue
                           }) {
                    return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
                },
                formatIcon({
                               cellValue
                           }) {
                    return `<i class="${cellValue} fa-lg"></i>`;
                },
                formatterMenuType(cellValue) {
                    let i = this.menuTypeOptions.findIndex((item) => item.value == cellValue)
                    return this.menuTypeOptions[i].label ? this.menuTypeOptions[i].label : '';
                },
                labelToId(name) {
                    let i = this.menuTypeOptions.findIndex((item) => item.label == name)
                    return this.menuTypeOptions[i].value ? this.menuTypeOptions[i].value : '';
                },
                selectMenuIcon() {
                    layer.open({
                        type: 2,
                        area: ['900px', '720px'], //宽高
                        fixed: false, //不固定
                        title: '选择菜单图标',
                        maxmin: true,
                        shadeClose: true,
                        btnAlign: 'r',
                        content: "../utl/select-icon.html"
                    });
                },
                toolbarButtonClickEvent({
                                            code
                                        }, event) {
                    switch (code) {
                        case 'reset':
                            this.searchEvent(this.queryData, 0)
                            break;
                        case 'search':
                            this.searchEvent(this.queryData, 1)
                            break;
                        case 'btnInsert':
                            var row = this.$refs.xTree.getCheckboxRecords();
                            if (row) {
                                var parentCode = row.parentMenuId;
                            } else {
                                var parentCode = "";
                            }
                            this.insertEvent(parentCode);
                            break;
                        case 'btnUpdate':
                            if (this.$refs.xTree.getCheckboxRecords().length == 1) {
                                let row = this.$refs.xTree.getCheckboxRecords()
                                this.editEvent(row[0]);
                            } else if (this.$refs.xTree.getCheckboxRecords().length > 1) {
                                this.$message({
                                    message: "数据大于一条，无法修改",
                                    type: 'warning',
                                    center: true
                                });
                            } else {
                                this.$message({
                                    message: "请选择一行数据",
                                    type: 'warning',
                                    center: true
                                });
                            }
                            break;
                        case 'btnDelete':
                            var row = this.$refs.xTree.getCheckboxRecords();
                            console.log(row)
                            if (row.length > 0) {
                                this.removeEvent(row);
                            } else {
                                this.$message({
                                    message: "请选择需要删除的数据行",
                                    type: 'warning',
                                    center: true
                                });
                            }
                            break;
                        case 'btnExport':
                            this.$refs.xTree.exportData({
                                filename: '菜单列表',
                                sheetName: 'Sheet1',
                                type: 'xlsx'
                            });
                            break;
                    }
                },
                insertEvent(parentCode) {
                    this.isEdit = false
                    this.formData = {
                        menuId: "",
                        orderId: "",
                        menuId: "",
                        menuName: "",
                        parentMenuId: parentCode == null ? "-1" : parentCode,
                        iconPath: "",
                        menuPath: "",
                        menuLx: 1,
                        menuDsc: "",
                        reportPath: "",
                        dataSource: ""
                    };
                    this.selectRow = null;
                    this.showEdit = true;
                },
                submitEvent(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.submitLoading = true;
                            this.disabled = true;
                            let params = Object.assign(this.formData);
                            var object = this;
                            if (this.isEdit) {
                                console.log(typeof this.formData.menuLx, this.formData.menuLx)
                                this.formData.menuLx = typeof this.formData.menuLx == 'string' ? this
                                    .labelToId(this.formData
                                        .menuLx) : this.formData.menuLx
                                webApi("/menuapp/save", "post", params, function(data) {
                                    if (data.code == 200) {
                                        object.findList();
                                        object.$message({
                                            message: data.msg,
                                            type: 'success',
                                            center: true
                                        });
                                        object.showEdit = false;
                                    } else {
                                        object.$message({
                                            message: data.msg,
                                            type: 'error',
                                            center: true
                                        });
                                    }
                                    object.disabled = false;
                                }, function(data) {
                                    object.disabled = false;
                                });
                            } else {
                                webApi("/menuapp/save", "post", params, function(data) {
                                    if (data.code == 200) {
                                        object.findList();
                                        object.$message({
                                            message: data.msg,
                                            type: 'success',
                                            center: true
                                        });
                                        object.showEdit = false;
                                    } else {
                                        object.$message({
                                            message: data.msg,
                                            type: 'error',
                                            center: true
                                        });
                                    }
                                    object.disabled = false;
                                }, function(data) {
                                    object.disabled = false;
                                });
                            }
                            this.$refs.xTree.setAllTreeExpansion(true);
                            this.submitLoading = false;
                        } else {
                            return false;
                        }
                    });
                },
                resetEvent(formName) {
                    this.formData = {
                        menuId: "",
                        orderId: "",
                        menuName: "",
                        parentMenuId: "",
                        iconPath: "",
                        menuPath: "",
                        menuLx: 1,
                        menuDsc: "",
                        reportPath: "",
                        dataSource: ""
                    };
                    this.selectRow = null;
                },
                closeEvent(formName) {
                    this.showEdit = false;
                },
                editEvent(row) {
                    this.isEdit = true
                    console.info(row);
                    this.formData = {
                        menuId: row.menuId == null ? "" : row.menuId,
                        orderId: row.orderId,
                        menuName: row.menuName,
                        parentMenuId: row.parentMenuId == null ? "" : row.parentMenuId,
                        iconPath: row.iconPath == null ? "" : row.iconPath,
                        menuPath: row.menuPath == null ? "" : row.menuPath,
                        menuLx: this.formatterMenuType(row.menuLx),
                        menuDsc: row.menuDsc == null ? "" : row.menuDsc,
                        reportPath: row.reportPath == null ? "" : row.reportPath,
                        dataSource: row.dataSource == null ? "" : row.dataSource
                    };
                    console.log(this.formData)
                    this.selectRow = row;
                    this.showEdit = true;
                },
                removeEvent(row) {
                    console.log(row)
                    this.$XModal.confirm('您确定要删除这条数据?(删除后所有用户无法再次访问该菜单)').then(type => {
                        if (type === 'confirm') {
                            this.submitLoading = true;
                            let ids = ""
                            row.forEach(item => {
                                ids += item.menuId + ","
                            });
                            let params = Object.assign({
                                menuId: ids
                            });
                            console.log(params)
                            var object = this;
                            webApi("/menuapp/delete", "post", params, function(data) {
                                if (data.code == 200) {
                                    object.findList();
                                    object.$message({
                                        message: data.msg,
                                        type: 'success',
                                        center: true
                                    });
                                    object.showEdit = false;
                                } else {
                                    object.$message({
                                        message: data.msg,
                                        type: 'error',
                                        center: true
                                    });
                                }
                            }, function(data) {});
                            this.submitLoading = false;
                        }
                    });
                },
                statusEvent(row, status) {
                    var msg = status == 1 ? '您确定要启用该数据？' : '您确定要停用该数据？';
                    this.$XModal.confirm(msg).then(type => {
                        if (type === 'confirm') {
                            this.submitLoading = true;
                            let params = Object.assign({
                                id: row.id,
                                status: status
                            });
                            XEAjax.post(`${curl}/menuapp/setStatus`, params).then(data => {
                                if (data.code == 200) {
                                    this.findList();
                                    this.$message({
                                        message: data.msg,
                                        type: 'success',
                                        center: true,
                                        center: true
                                    });
                                    this.showEdit = false;
                                } else {
                                    this.$message({
                                        message: data.msg,
                                        type: 'error',
                                        center: true,
                                        center: true
                                    });
                                }
                            });
                            this.submitLoading = false;
                        }
                    });
                },
                cellDBLClickEvent({
                                      row,
                                      rowIndex,
                                      $rowIndex,
                                      column,
                                      columnIndex,
                                      $columnIndex,
                                      $event
                                  }) {
                    if (columnIndex > 1) {
                        this.editEvent(row);
                    }
                },
                checkColumnMethod({
                                      column
                                  }) {
                    if (['menuCode', 'menuName'].includes(column.property)) {
                        return false
                    }
                    return true
                },
                //表头列排序
                tableSortChange(column, prop, order) {
                    console.log(column + '---' + column.prop + '---' + column.order)
                    this.order=column.order;
                    this.prop=column.prop;
                    this.findList();
                }
            }
        };
        vue = Vue.extend(main);
        vue = new vue().$mount('#app');
    }

    function parentSetMenuIcon(codeValue) {
        console.info(vue)
        vue.$data.formData.iconPath = codeValue;
    }
</script>

</html>
